<template>
  <div class="page-content">
    <h3>领券记录</h3>
    <el-form :model="searchForm">
      <el-row :gutter="24">
        <el-col :span="7">
          <el-form-item prop="memberName" label="用户信息：">
            <el-input placeholder="请输入用户信息" v-model="searchForm.memberName" clearable @blur="getData"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item prop="couponName" label="优惠券名称：">
            <el-input placeholder="请输入优惠券名称" v-model="searchForm.couponName" clearable @blur="getData"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="领取时间：">
            <el-date-picker label="领取时间：" v-model="datavalue1" type="datetimerange" start-placeholder="开始日期"
              end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
              @change="receiveTimeChange" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <art-table :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize" :total="pageTotal"
      @current-change="currentChange" @size-change="sizeChange">
      <template #default>
        <!--        <el-table-column label="ID" prop="id" width="55" align="center" />-->
        <el-table-column label="用户信息" prop="memberName" align="center" #default="scope">
          <div>{{ scope.row.memberName }}</div>
          <div v-if="scope.row.memberId">ID：{{ scope.row.memberId }}</div>
          <div v-if="scope.row.memberMobile">手机号：{{ scope.row.memberMobile }}</div>
        </el-table-column>
        <el-table-column label="优惠券名称" prop="couponName" align="center" />
        <el-table-column label="优惠券类型" prop="couponType" #default="scope" align="center">
          <el-tag :type="getCouponType(scope.row.couponType)">
            {{ couponTagText(scope.row.couponType) }}
          </el-tag>
        </el-table-column>
        <el-table-column label="最低消费金额（元）" prop="minConsumption" align="center" />
        <el-table-column label="优惠方式" align="center" #default="scope">
          {{ scope.row.couponType === 1 ? `满${scope.row.minConsumption}优惠${scope.row.discountAmount}元` :
            `满${scope.row.minConsumption}打${scope.row.discountRate}折` }}
        </el-table-column>
        <el-table-column label="有效期" prop="expiryTime" align="center" />
        <el-table-column label="领取时间" prop="receiveTime" align="center" />
        <el-table-column label="使用状态" prop="status" align="center">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.status)">
              {{ buildTagText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </template>
    </art-table>
  </div>
</template>

<script setup lang="ts">
import { couponsGetRecord } from '@/api/marketing'

const searchForm = reactive({
  couponName: '',
  memberName: '',
  queryStartTime: '',
  queryEndTime: ''
})

const buildTagText = (status: number) => {
  let text = ''
  if (status === 0) {
    text = '未使用'
  } else if (status === 1) {
    text = '已使用'
  } else if (status === 2) {
    text = '已过期'
  }
  return text
}
const couponTagText = (status: number) => {
  let text = ''
  if (status === 1) {
    text = '满减券'
  } else if (status === 2) {
    text = '折扣券'
  }
  return text
}

const getTagType = (status: number) => {
  return status === 0 ? 'primary' : status === 1 ? 'info' : 'danger'
}
const getCouponType = (status: number) => {
  return status === 1 ? 'primary' : 'success'
}
const datavalue1 = ref('')

const tableData = ref([])

const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}

const currentChange = (val: number) => {
  pageNum.value = val
  getData()
}

const sizeChange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getData()
}

const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)

const filterEmptyValues = (obj: any) => {
  const result: any = {}
  for (const key in obj) {
    if (obj[key] !== '' && obj[key] !== null && obj[key] !== undefined) {
      result[key] = obj[key]
    }
  }
  return result
}

const getData = async () => {
  try {
    const params = filterEmptyValues(searchForm)
    const res = await couponsGetRecord({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...params
    })
    if (res.code === '00000') {
      tableData.value = res.data.list
    }
  } catch { } finally { }
}

const receiveTimeChange = (e: any) => {
  if (e) {
    searchForm.queryStartTime = formatDate(e[0])
    searchForm.queryEndTime = formatDate(e[1])
  } else {
    searchForm.queryStartTime = ''
    searchForm.queryEndTime = ''
  }
  getData()
}

const reset = () => {
  searchForm.couponName = ''
  searchForm.memberName = ''
  searchForm.queryStartTime = ''
  searchForm.queryEndTime = ''
  datavalue1.value = ''
  getData()
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.page-content {
  .svg-icon {
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    vertical-align: -8px;
    fill: currentcolor;
  }

  h3 {
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>